<title>临时任务</title>
<div class="layui-card layadmin-header">
	<div class="layui-breadcrumb" lay-filter="breadcrumb" lay-separator=">">
        <a lay-href=""><i class="layui-icon layui-icon-locate"></i>您当前的位置：</a>
		<a><cite>任务管理</cite></a>
		<a><cite>临时任务</cite></a>
	</div>
</div>
<script src="/src/lib/echarts.min.js"></script>
<style>
	.temporary-content .temporary-left {
		width: 400px;
		overflow: hidden;
		float: left;
		background-color: #fff;
		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
	}
	.temporary-content .temporary-left #LAY-temporary-timeline {
		overflow: hidden;
	}

	.temporary-content .temporary-left #LAY-temporary-timeline .my-timeLine-content {
		height: 760px;
		overflow-y: auto;
	}

	.temporary-content .temporary-right {
		padding-left: 10px;
		overflow: hidden;
	}

	.temporary-right .layui-btn {
		border-left: 1px solid rgb(255, 255, 255);
	}

	.temporary-content .blockTitle {
		padding-left: 35px;
	}
	.temporary-content .layui-text h3 {
		font-size: 18px;
		color: rgb(102,102,102) !important;
	}
	.temporary-content .blockTitle .title-icon {
		width: 18px;
		height: 18px;
		line-height: 12px;
		left: 15px;
		color: #5DC5DC;
	}

	.temporary-content .timeLineIcon {
		font-size: 24px;
		font-weight: 700;
		color: #60E2BC;
    	box-shadow: 0px 0px 16px #60E2BC;
		-ms-behavior: url(../../dist/style/res/PIE.htc);
		behavior: url(../../dist/style/res/PIE.htc);
	}

	.temporary-content .timeLineYearIcon {
		font-size: 24px;
		font-weight: 700;
		position: absolute;
		left: -13px;
		top: 0;
		z-index: 10;
		width: 40px;
		height: 40px;
		line-height: 40px;
		background-color: #ED914D;
		color: #ED914D;
		text-align: center;
		border-radius: 50%;
		cursor: pointer;
		box-shadow: 0px 0px 6px #888888;
		-ms-behavior: url(../../dist/style/res/PIE.htc);
		behavior: url(../../dist/style/res/PIE.htc);
	}

	.temporary-content .timeLineMonthIcon {
		font-size: 24px;
		font-weight: 700;
		position: absolute;
		left: -13px;
		top: 0;
		z-index: 10;
		width: 40px;
		height: 40px;
		line-height: 40px;
		background-color: #60E2BC;
		color: #60E2BC;
		text-align: center;
		border-radius: 50%;
		cursor: pointer;
		box-shadow: 0px 0px 6px #888888;
		-ms-behavior: url(../../dist/style/res/PIE.htc);
		behavior: url(../../dist/style/res/PIE.htc);
	}

	.temporary-content .timeMothClock {
		display: block;
		width: 40px;
		height: 40px;
		background-image: url(../../dist/style/res/clock.png);
		background-size: 30px 30px;
		background-repeat: no-repeat;
		background-position: center center;
		-ms-behavior: url(../../dist/style/res/backgroundsize.min.htc);
		behavior: url(../../dist/style/res/backgroundsize.min.htc);
	}

	.temporary-content .layui-timeline-item:before {
		background-color: #60E2BC;
		width: 4px;
	}

	.temporary-content .layui-timeline {
		padding-left: 15px;
	}

	.temporary-content .timeContent {
		color: #fff;
		padding: 20px 20px 20px 30px;
		background-image: url(../../dist/style/res/timeBg-h.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: left top;
		word-break: break-all;
		-ms-behavior: url(../../dist/style/res/backgroundsize.min.htc);
		behavior: url(../../dist/style/res/backgroundsize.min.htc);
	}

	.temporary-content .timeContentDark {
		color: #fff;
		padding: 20px 0px;
		padding-left: 35px;
		background-image: url(../../dist/style/res/newTimeBg.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: left top;
		-ms-behavior: url(../../dist/style/res/backgroundsize.min.htc);
		behavior: url(../../dist/style/res/backgroundsize.min.htc);
	}
	
	.temporary-content .layui-timeline .taskLine {
		position: relative;
		padding: 5px 0px;
		letter-spacing: 1px;
	}

	.temporary-content .layui-timeline .taskBottom {
		margin-right: 25px;
		border-bottom: 1px solid rgb(255,255,255);
	}
	.temporary-content .layui-timeline .taskLineIcon {
		position: absolute;
		top: 5px;
		right: 35px;
		width: 20px;
		height: 20px;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: left top;
		-ms-behavior: url(../../dist/style/res/backgroundsize.min.htc);
		behavior: url(../../dist/style/res/backgroundsize.min.htc);
	}

	.temporary-content .btn-color {
		background-color: #2669B1;
		margin-right: 10px !important;
		/* behavior: url(../../dist/style/res/PIE.htc);
		-ms-behavior: url(../../dist/style/res/PIE.htc); */
	}

	.temporary-content .layui-table-header thead tr {
		border-radius: 4px;
		/* behavior: url(../../dist/style/res/PIE.htc);
		-ms-behavior: url(../../dist/style/res/PIE.htc); */
	}

	.temporary-content .layui-table-body{
		margin-top: 2px;
	}
	.temporary-content .layui-table-body tbody {
		background-color: #D3E5FF;
	}
	.temporary-content .layui-table-cell a{
		color: #1C74D4;
	}
	.layui-table-view .layui-table-cell{
		height: inherit;
	}
	.temporary-content .layui-badge {
		height: 19px;
		line-height: 21px;
		border-radius: 9px;
		width: 100%;
		-ms-behavior: url(../../dist/style/res/PIE.htc);
		behavior: url(../../dist/style/res/PIE.htc);
	}
	.temporary-content .my-table-btn {
		font-size: 20px;
		border-width: 1px;
		border-style: solid;
		border-radius: 4px;
		margin-right: 4px;
		-ms-behavior: url(../../dist/style/res/PIE.htc);
		behavior: url(../../dist/style/res/PIE.htc);
	}

	.temporary-content .layui-icon-download-circle{
		color: #1C74D4 !important;
		border-color: #1C74D4 !important;
	}
	.temporary-content .my-table-btn-edit {
		color: #FD9404 !important;
		border-color: #FD9404;
	}

	.temporary-content .my-table-btn-del, .temporary-content .my-table-btn-check{
		color: #FF4E32 !important;
		border-color: #FF4E32;
	}

	.temporary-content .my-table-btn-edit:hover {
		color: #0BAFFD !important;
		border-color: #0BAFFD;
	}

	.temporary-content .my-table-btn-del:hover, .temporary-content .my-table-btn-check:hover{
		color: #0BAFFD !important;
		border-color: #0BAFFD;
	}
	.temporary-content .layui-card-header .layui-icon-add-1{
		font-size: 17px !important;
		position: absolute !important;
		right: 45px;
		top: 0px;
		margin-top: 0px;
		line-height: inherit;
	}
	.alert-skin{
		background-image: url(../../dist/style/res/head.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center center;
		-ms-behavior: url(../../dist/style/res/backgroundsize.min.htc);
		behavior: url(../../dist/style/res/backgroundsize.min.htc);
	}
	.layui-table tbody tr.lineactive{
        background-color: #FDE7A3;
    }

	#flowChart-content .ystep-lg{
		left: 10% !important;
	}
	.jOrgChart{
		overflow-x: auto;
	}
	.layui-btn-add{
		float: right;
		width: 65px;
		position: relative;
		text-align: right;
		margin-top: 5px;
	}
	#flowChart-content .ystep-container-steps span{
		width: 100px;
	}
	.layui-table-view td[data-field="state"] .layui-table-cell{
		padding: 0;
		text-align: center;
	}
	.temptoryTabBox >.layui-tab-title{
		background-color: #F4F4F4;
		background: url("/start/jOrgChart/images/bkgd.png");
		/* background-size: 100% 100%;
		background-repeat: no-repeat; */
	}
	.temptoryTabBox{
		box-shadow: 0 2px 5px 0 rgba(255,255,255,.1);
	}
	.temptoryTabBox .layui-tab-content{
		padding: 0px;
	}
	.temptoryTabBox  .processBox{
			min-height: 495px;
			width: 100%;
			background: url("/start/jOrgChart/images/bkgd.png");
	}
	.showEntuserCircle{
        display: inline-block;
        width: 10px;
        height: 10px;
        position: absolute;
        background: #ef5757;
        border-radius: 50%;
        top: 35%;
        right: 6px;
        cursor: pointer;
    }
	/* 查看更多 */
	.memoBox{
        position: relative;
    }
    .memoBox>span{
        display: inline-block;
        width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }
    .memoTxtBox{
        position: absolute;
        left: 0%;
        top: 26px;
        background: #000;
        display: none;
        padding: 6px;
        color: #fff;
        z-index: 9999;
        cursor: pointer;
    }
    .moreTxtBox{
        height: 330px;
        overflow-y: auto;
        padding: 10px;
    }
</style>
<div class="temporary-content layui-fluid">
	<div class="temporary-left" id="temporary-left-view">
	</div>
	<div class="temporary-right">
		<div id="LAY-temporary-table">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div class="layui-card">
						<div class="layui-card-header blockTitle">
							<i class="layui-icon layui-icon-form title-icon"></i>
							下发任务详情
						</div>
						<div class="layui-card-body">
							<div class="layui-btn-group" style="margin-left: 15px;">
								<!-- <button type="button" class="layui-btn layui-btn-sm btn-color T-eBtn" data-target="resident">
									<i class="layui-icon layui-icon-form"></i>设为常驻任务
								</button> -->
								<button type="button" class="layui-btn layui-btn-sm btn-color T-eBtn" data-target="audit">
									<i class="layui-icon layui-icon-upload-circle"></i>提交审核
								</button>
							</div>
							<div class="layui-card-body">
								<table class="layui-hide" id="temporary-table-page" lay-filter="temporary-table-operate"></table>
								<script type="text/html" id="temporary-table-operate-bar">
									<a class="layui-icon layui-icon-edit my-table-btn my-table-btn-edit" lay-event="edit" lay-tips="编辑"></a>
									<a class="layui-icon layui-icon-delete my-table-btn my-table-btn-del" lay-event="del" lay-tips="删除"></a>
									<a class="layui-icon layui-icon-form my-table-btn my-table-btn-check" lay-event="check" lay-tips="查看记录"></a>
								</script>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
	  <div class="layui-tab layui-tab-card temptoryTabBox">
			<ul class="layui-tab-title">
			  <li class="layui-this">流程图</li>
			  <li>树形图</li> 
			</ul> 
			<div class="layui-tab-content">
			  <div class="layui-tab-item layui-show">
					<div id="processBox" class="processBox"></div>
			  </div>
			  <div class="layui-tab-item">
				<div id="flowChart-content">
					<!-- 菜单及分页容器-->
					<div class="stepCont stepCont1">
						<!-- 菜单导航显示-->
						<div class='ystep-container ystep-lg ystep-blue'></div>
					</div>
					<div id="chart-container-wrapper-temporary"></div>
				</div>
			  </div> 
			</div>
		  </div>   
	</div>
</div>
<script type="text/html" id="temporarytimeLineTpl">
	<div id="LAY-temporary-timeline">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div class="layui-card">
						<div class="layui-card-header blockTitle">
							<i class="layui-icon layui-icon-form title-icon"></i>
							下发任务时间轴
							<button type="button" class="layui-btn layui-btn-sm layui-btn-add btn-color T-eBtn" data-target="add">
								<i class="layui-icon layui-icon-add-1" style="right: 35px;"></i>新增
							</button>
						</div>
						<div class="layui-card-body my-timeLine-content">
							<ul class="layui-timeline">
								{{# if(d && d.length > 0){ }}
									<li class="layui-timeline-item">
										<i class="layui-icon layui-timeline-axis timeLineIcon"></i>
										<div class="layui-timeline-content layui-text">
											<h3 class="layui-timeline-title">现在</h3>
										</div>
									</li>
								{{# 
									layui.each(d, function(index,item) {
											if(item.child && item.child.length && item.child.length > 0) {
												layui.each(item.child, function(childIindex, itemChild) {
													if(itemChild.child && itemChild.child.length && itemChild.child.length > 0) {
														layui.each(itemChild.child, function(grandsonIndex, itemGrandson) {
												}}
															<li class="layui-timeline-item">
																<i class="layui-icon layui-timeline-axis timeLineIcon"></i>
																<div class="layui-timeline-content layui-text">
																	<h3 class="{{'layui-timeline-title T-day-'+item.year+itemChild.month+itemGrandson.day}}">{{itemChild.month}}月{{itemGrandson.day}}日</h3>
																	{{#
																	if(itemGrandson.data && itemGrandson.data.length && itemGrandson.data.length > 1) {
																	}}
																		<div class="timeContentDark taskEvent" data-index="{{grandsonIndex+1}}" data-tag='{{JSON.stringify(itemGrandson.data)}}'>
																	{{#
																	}else {
																	}}
																		<div class="timeContent taskEvent" data-index="{{grandsonIndex+1}}" data-tag='{{JSON.stringify(itemGrandson.data)}}'>
																	{{#
																	}
																	}}
																		{{#
																		if(itemGrandson.data && itemGrandson.data.length && itemGrandson.data.length > 0) {
																				var getIcon = function(task) {
																					var mapIcons = {
																						'00': 'url(../../dist/style/res/task-fill.png)',
																						'03': 'url(../../dist/style/res/task-fill.png)',
																						'05': 'url(../../dist/style/res/task-audit.png)',
																						'08': 'url(../../dist/style/res/task-audit.png)',
																						'10': 'url(../../dist/style/res/task-done.png)',
																						'15': 'url(../../dist/style/res/task-done.png)',
																						'20': 'url(../../dist/style/res/task-done.png)'
																					};
																					return mapIcons[task.state] || '';
																				};
																			layui.each(itemGrandson.data, function(taskIndex, task) {
																		}}
																				<div class="taskLine" data-id="{{task.id}}">
																					{{task.statename}}：{{task.taskname}} <br>
																					{{task.starttime.substring(0, 10)}} 至 {{task.endtime.substring(0, 10)}}
																					<i class="taskLineIcon layui-hide" style="background-image: {{ getIcon(task) }}"></i>
																				</div>
																				{{#
																				if(itemGrandson.data.length > (taskIndex + 1)) {
																				}}
																					<div class="taskBottom"></div>
																				{{#
																				}
																				}}
																		{{#
																			})
																		}
																		}}
																	</div>
																</div>
															</li>
												{{# 	})
													}
												}}
													<li class="layui-timeline-item">
														<i class="layui-icon timeLineMonthIcon">
															<span class="timeMothClock"></span>
														</i>
														<div class="layui-timeline-content layui-text"
															style="padding-left: 30px;line-height: 40px;">
															<h3 class="layui-timeline-title">{{itemChild.month}}月</h3>
														</div>
													</li>
									{{# 
											})
										}
									}}
										<li class="layui-timeline-item">
											<i class="layui-icon timeLineYearIcon">
												<span class="timeMothClock"></span>
											</i>
											<div class="layui-timeline-content layui-text"
												style="padding-left: 30px;line-height: 40px;">
												<h3 class="layui-timeline-title" style="font-size: 24px;">{{item.year}}</h3>
											</div>
										</li>
								{{# 
									})
								}}
								{{# }else{ }}
									<div class="no-data-tips" style="margin-top:90px"><img src="/src/style/res/about/empty.png"><p style="color:#DBDBDB;">暂无数据</p></div>
								{{# } }}
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
</script>
<script type="text/html" id="temporaryenclosureTpl">
	{{#  if(!!d.fileNames && d.fileNames.length && d.fileNames.length > 0){ 
		$.each(d.fileNames, function(index, file) {
	}}
		<a class="T-downLoad" data-taskid={{file.taskid}} data-url="{{file.url}}" href="javascript:void(0);" lay-tips='{{file.filename}}'>{{file.filename}}</a>
	{{#  }) } else { }}
		<a href="javascript:void(0);" data-id="{{d.id}}" class="temporary-upload">上传附件</a>
	{{#  } }}
</script>

<script type="text/html" id="temporarystatusTpl">
    {{#
		var getStatusColor = function() {
			var mapColors = {
                '00': 'layui-bk-green',
                '20': 'layui-bk-gray',
                '25': 'layui-bk-orange',
                '30': 'layui-bk-green',
                '40': 'layui-bk-orange',
                '90': 'layui-bk-gray',
                '99': 'layui-bk-gray'
			};
			return mapColors[d.state] || '';
			
		};
		var disPlayTxt=d.entuser_name?'inline-block':'none' 
	}}
	<!-- <span class="custom-badge {{getStatusColor()}}">{{d.statename}}</span>	 -->
	<div class="custom-badge {{getStatusColor()}}">{{d.statename}}<span  class="showEntuserCircle" style="display:{{disPlayTxt}}" lay-tips='委托人：{{d.entuser_name}}'></span></div>	
</script>

<script>
	layui.use(['admin', 'table', 'laytpl', 'tools', 'upload'], function () {
		var $ = layui.$,
			view = layui.view,
			admin = layui.admin,
			element = layui.element,
			laytpl = layui.laytpl,
			table = layui.table,
			tools = layui.tools,
			setter = layui.setter,
			upload = layui.upload,
			router = layui.router(),
			layer = layui.layer;
			taskTreeData = [],
			nodeCount = 0,
			currentStep=null,//当前第几步
			steps=[''],
			stepCounts=null,
			percentage= [''],
			flagObj={},
			$li="", 
			uploadFileUrl = 'myapi/DC/api/rest/web/custom/uploadTaskFile',
			layout = ['div.taskLine', 'div.my-header-setapp', 'div.user-info', '.layui-table th', '.layui-table td', '.ystep-container', '#chart-container-wrapper-temporary'];

		inintData('init');

		if(router.search.isCreate === '1') {
            createLSTask();
        } 
		//初始获取数据
		function inintData(type) {
			var getTpl = temporarytimeLineTpl.innerHTML,
			viewHtml = document.getElementById('temporary-left-view');
			admin.req({
				type:'get',
				url: 'myapi/DC/api/rest/web/custom/TemporaryTask?model=select',
				done: function(res){
					laytpl(getTpl).render(res.data.ret, function(html){
						viewHtml.innerHTML = html;
						taskTreeData = res.data.ret;
						if(type == 'init'){
							rederTable(getFristData(res.data.ret));
						}
					});
				}
			});
			return true;
		};

		//操作后刷新页面
		function reInitData(positionDate) {
			var getTpl = temporarytimeLineTpl.innerHTML,
			viewHtml = document.getElementById('temporary-left-view');
			admin.req({
				url: 'myapi/DC/api/rest/web/custom/TemporaryTask?model=select',
				done: function(res){
					laytpl(getTpl).render(res.data.ret, function(html){
						viewHtml.innerHTML = html;
						if($('.T-day-'+positionDate).length > 0) {
							var initTop = $('.T-day-'+positionDate).offset().top - 164;
							$('.my-timeLine-content').scrollTop(initTop);
							$('#temporary-left-view .T-day-'+positionDate).closest('.layui-timeline-content').find('.taskEvent').trigger('click');
						}else {
							rederTable(getFristData(res.data.ret));
						}
					});
				}
			});
			return true;
		}
		$('#temporary-left-view').on('click', '.taskEvent', function() { 
			var dateData = $(this).data('tag');
			rederTable(dateData);
		});

		$('#temporary-left-view').on('click', '.taskLine', function(e) {
			e.stopPropagation(); 
			var dateData = $(this).parent().data('tag'),
				taskid = $(this).data('id');
			rederTable(dateData, taskid);
		});

		function getFristData(data) {
			var tableData = [];
			if(data && data.length && data.length > 0) {
				var yearData = data[0];
				if(yearData.child && yearData.child.length && yearData.child.length > 0) {
					var monthData = yearData.child[0];
					if(monthData.child &&  monthData.child.length && monthData.child.length > 0) {
						var dayData = monthData.child[0];
						if(dayData.data && dayData.data.length && dayData.data.length > 0) {
							tableData = dayData.data;
							getFormant(dayData.data[0])
						};
					};
				};
			};
			return tableData;
		};

		function rederTable(data, id) {
			var taskid = id || '',
				selectIndex = 0;
			var options = {
				elem: '#temporary-table-page',
				height: 163,
				text: {
					none: '<div class="no-data-tips"><img src="/src/style/res/about/empty.png"><p style="color:#DBDBDB;">暂无数据</p></div>'
				},
				data: data,
				cols: [
					[{ 
						type: 'numbers', 
						title: '序号' 
					},
					{
						field: 'taskname',
						width: 410,
						title: '任务名称',
						style: 'border-color: #fff; color: #333333;'
					}, {
						field: 'state',
						width: 100,
						title: '任务状态',
						style: 'border-color: #fff; color: #333333;',
						align: 'center',
						templet: '#temporarystatusTpl'
					}, {
						field: 'starttime',
						width: 120,
						title: '开始时间',
						style: 'border-color: #fff; color: #333333;',
						templet: function(d) {
							return d.starttime.substring(0,10)
						}
					}, {
						field: 'endtime',
						width: 120,
						title: '结束时间',
						style: 'border-color: #fff; color: #333333;',
						templet: function(d) {
							return d.endtime.substring(0,10)
						}
					}, {
						field: 'memo',
						title: '填报要求',
						minWidth: 150,
						style: 'border-color: #fff; color: #333333;', 
						templet: function(d){  
							var memoHtml=''; 
							if(d.memo.length>10){ 
							memoHtml= ' <div class="memoBox">'+
										'<span>'+d.memo+'</span> </span>'+  
										'<div class="memoTxtBox moreTxt"   alltxt="'+d.memo+'">'+
											d.memo.substring(0,10)+'....更多>>>' 
										'</div>'+
										'</div>'
							}else{
								memoHtml='<span lay-tips="'+ d.memo +'" >'+ d.memo +'</span>' ;
							}
							return memoHtml
						}
					}, {
						field: 'filename',
						width: 150,
						title: '任务附件',
						style: 'border-color: #fff; color: #333333;',
						templet: '#temporaryenclosureTpl'
					}, {
						title: '任务操作',
						width: 150,
						align: 'center',
						toolbar: '#temporary-table-operate-bar',
						style: 'border-color: #fff; color: #333333;'
					}]
				],
				done: function(res, curr, count){
					if(res.data && res.data.length > 0){
						var positionDate = res.data[0].year+res.data[0].month+res.data[0].day;
						$(".memoBox").parent(".layui-table-cell").css({"overflow":"visible"})
						$('.layui-card-body').find('.temporary-upload').each(function(i,el) {
							var taskId = $(el).data('id'), tempFileName = '';
							// upload.render({
							// 	elem: el,
							// 	accept: 'file',
							// 	url: 'myapi/DC/api/rest/web/custom/uploadTaskFile?access_token='+layui.data(setter.tableName)[setter.request.tokenName],
							// 	data: {
							// 		taskid: taskId
							// 	},
							// 	choose: function(obj) {
							// 		obj.preview(function(index, file, result){
							// 			tempFileName = file.name;
							// 		})
							// 	},
							// 	done: function(res, index, upload){ //上传后的回调
							// 		if(res.retcode == 0) {
							// 			reInitData(positionDate);
							// 		}else {
							// 			layer.msg('提示: '+ res.retmsg,{time: 1000});
							// 		}
							// 	},error: function(index, upload){
							// 		layer.msg('上传失败，请重新选择文件上传', {time: 1000});
							// 	}
							// });
							//dropzone文件上传
							tools.DropzoneUpload(el, uploadFileUrl, {taskid: taskId}, success = function(res){
								reInitData(positionDate);
								layer.msg('上传成功', {time: 1000});
							});
						});

						$('.layui-card-body').find('.T-downLoad').on('click', function() {
							var url = 'myapi/DC'+ $(this).data('url'),
								name = $(this).text(),
								taskid=$(this).data("taskid");
							tools.downMethodfunction(url, name,taskid);
						});
						 //填报内容样式处理
						 $(".memoBox").on("mouseover",function(){  
                        	$(this).find(".memoTxtBox").show();  
						})
						$(".memoBox").on("mouseout",function(){ 
							$(this).find(".memoTxtBox").hide(); 
						})  
						//点击更多查看
						$(".moreTxt").click(function(){ 
							layer.open({
								type: 1, 
								content: '<div class="moreTxtBox" >'+ $(this).attr("alltxt")+'</div>', //这里content是一个普通的String
								area:['700px','400px'],
								shadeClose:true,
							});
						})
						//选中行
						layui.each(res.data, function(index, task){
							if(task.id == taskid){
								selectIndex = index;
							}
						})
						$('.layui-table tbody tr').eq(selectIndex).addClass('lineactive'); 
						getFormant(res.data[selectIndex]);
					}
					tools.setFont(layout);
				}
			};
			table.render(options);
		};
		
		//监听工具条
		table.on('tool(temporary-table-operate)', function (obj) {
			console.log('obj', obj);
			var data = obj.data,
				state = parseInt(data.state),
				positionDate = data.year+data.month+data.day,
				ev = obj.ev;
			layui.stope(ev);
			switch(obj.event) {
				case 'del':
					if(state == 00 || state == 20){ //能删除的状态（已创建、退回修改)
						layer.confirm('确认删除当前任务吗？', function (index) {
							admin.req({
								url: 'myapi/DC/api/rest/web/custom/TemporaryTask?model=del',
								data: {
									id: data.id
								},
								success: function(res){
									reInitData(positionDate);
								}
							});
							layer.close(index);
						});
					}else{
						layer.msg('当前任务不能删除', {time: 1000});
					}
				break;
				case 'edit':
					if(state == 00 || state == 20){ //能修改的状态（已创建、退回修改)
						admin.req({
							url: 'myapi/DC/api/rest/web/custom/GetTaskMsgsById',
							data: {
								id: data.id,
								jsonId: layui.data('layuiAdmin').access_token
							},
							success: function(res){
								if(res.retcode == '0'){
									layer.open({
										id: 'temporary-updatehtml',
										title: '<i class="formFill-icon"></i><span style="color:#FFF;">修改临时任务</span>',
										offset: '20px',
										type: 1,
										shadeClose: false,
										area: ['1133px', '700px'],
										success: function(lay) {
											var passData = res.data;
											passData.callBack = function() {
												reInitData(positionDate);
											}
											view(this.id).render('./task/temporary/add', passData);
										},
										cancel: function() {
											window.selectTable = [];
											var myIframe = document.getElementById('mainFormIframe');
											tools.destroyIframe(myIframe);
											return true;
										}
									});
								}
							}
						});
					}else{
						layer.msg('当前任务不能编辑', {time: 1000});
					}
				break;
				case 'past':
					if(state == 00){
						layer.confirm('确认下发此任务吗？', function (index) { //能下发的状态（已创建)
							admin.req({
								url: 'myapi/DC/api/rest/web/custom/TaskIssue',
								data: {
									taskid: data.id
								},
								success: function(res){
									reInitData(positionDate);
									layer.msg('下发成功', {time: 1000});
									layer.close(index);
								}
							});
						});
					}else{
						var infoMsg = '';
						if(state == '90'){
							infoMsg = '任务已结束';
						}else if(state == '99'){
							infoMsg = '任务已关闭';
						}else{
							infoMsg = '任务已下发';
						}
						layer.msg(infoMsg, {time: 1000});
					}
				break;
				case 'check': 
					admin.req({
						url: 'myapi/DC/api/rest/web/custom/GainHistory',
						data: {
							id: data.id
						},
						done: function(res){
							if(res.retcode == '0'){
								if(res.data && res.data.length > 0){
									var taskrecode = layer.open({
										id: 'temporary-addhtml',
										title:'<i class="formFill-icon"></i><span style="color:#FFF;">查看记录</span>',
										offset: '110px',
										type: 1,
										shadeClose: true,
										area: ['700px', '420px'],
										resize: false,
										success: function(lay, index){
											view(this.id).render('./task/temporary/history', {history: res.data});
										}
									});
								}else{
									layer.msg('暂无记录', {time: 1000});
								}
							}
						}
					})
				break;
				default:
				break;
			}
		});

		//监听行单双击事件
		table.on('row(temporary-table-operate)', function(obj){
			$('[lay-id="temporary-table-page"]').find(obj.tr.selector).addClass('lineactive');
			$('[lay-id="temporary-table-page"]').find(obj.tr.selector).siblings().removeClass('lineactive');
			var rowData = obj.data;
			admin.req({
				url: 'myapi/DC/api/rest/web/custom/SelectInformantByTaskid',
				data: {
					taskid: rowData.id
				},
				success:function(result){
					if (result.retcode == '0'){
						var data = result.data.data;
						if(data && data.listquery){
							handleStateMap(data.listquery);
						}
						view('chart-container-wrapper-temporary').render('./task/permanent/chart',{info: data.writemsg, tid: data.taskid, args: rowData, type:'ls'});
						showChartsFun(result);
					}
				},
				error:function(err){
					console.log("数据请求出错");
				}
			});
        });


		//页面按钮点击事件 
		$('.temporary-content').on('click', '.T-eBtn', function() {
			var target = $(this).data('target');
			switch(target) {
				case 'add':
					createLSTask();
					break;
				case 'audit': 
					var selectTask = document.querySelectorAll('tr.lineactive');
					if(selectTask.length > 0){
						var taskList = table.cache['temporary-table-page'],
							taskId = [],
							chooseTask = [];
						layui.each(selectTask, function(index, item){
							var selectIndex = item.getAttribute('data-index');
							chooseTask.push(taskList[selectIndex]);
						})	
						layui.each(chooseTask, function(index, item){
							var positionDate = item.year+item.month+item.day;
							if(item.state == '00' || item.state == '20'){ //能提交审核的状态（已创建、退回修改）
								layer.confirm('确认提交审核当前任务吗？',{icon: 3, title: '<i class="formFill-icon"></i><span style="color:#FFF;">提示</span>'}, function(index){
									taskId.push(item.id);
									admin.req({
										url: 'myapi/DC/api/rest/web/custom/SubmitAudit',
										data: {
											taskid: JSON.stringify(taskId)
										},
										success: function(res){
											if(res.retcode == '0'){
												reInitData(positionDate);
												layer.msg('提交审核成功', {time: 1000});
											}
										}
									})
								});
							}else{
								layer.msg('状态为已创建和退回修改的任务才能提交审核');
							}
						});
				}else{
					layer.msg('请选择需要提交审核的任务', {time: 1000});
				}
				default:
					break;
			}
		});
		
		//创建临时任务
		function createLSTask() {
			layer.open({
				id: 'temporary-addhtml',
				title:'<i class="formFill-icon"></i><span style="color:#FFF;">创建临时任务</span>',
				offset: '50px',
				type: 1,
				shadeClose: false,
				area: ['1200px', '700px'],
				success: function(lay) {
					var data = {};
					data.callBack = function() {
						inintData('init');
					}
					view(this.id).render('./task/temporary/add',data);
				},
				cancel: function() {
					window.selectTable = [];
					var myIframe = document.getElementById('mainFormIframe');
					tools.destroyIframe(myIframe);
					return true;
				}
			});
		}

		//加载任务流程向导
		function handleStateMap(data){
			steps = [''];
			percentage = [''];
			stepsCounts = 0;
			if(data && data.length > 0){
				$('.stepCont1 .ystep-container').empty();
				for (var i=0;i<data.length;i++){
					if (data[i].nodestate=="2"){
						currentStep=i+2;
					}
					if(data[i].percentage){
						percentage.push(data[i].percentage);
					}else{
						percentage.push('');
					}
					steps.push(data[i].name);		
				}
				steps.push("");
				percentage.push("");
				stepCounts=steps.length;

				var step1 = new SetStep({
					content:'.stepCont1',
					showBtn:false,
				})
			}
		}
		
		function extend(obj1,obj2){
			for(var attr in obj2){
				obj1[attr] =  obj2[attr];
			}
		}
		function SetStep(arg){
		    this.body=document.body;
		    this.opt = {
		        show:false,
		        content:'.stepCont',
		        pageCont:'.pageCont',
		        imgWidth:20,
		        stepContainerMar:20,
		        nextBtn:'.nextBtn',
		        prevBtn:'.prevBtn',
		        steps:steps, 
		        //pageClass:'',//分页的类或则id
		        stepCounts:stepCounts,//总共的步骤数
		        curStep:currentStep,//当前显示第几页
		        animating:true,
		        showBtn:true,//是否生成上一步下一步操作按钮
		        clickAble:false,//是否可以通过点击进度条的节点操作进度
		        onLoad: function(){}
		    }
		    this.init(arg)
		}
		//初始化 生成页面的进度条和按钮
		SetStep.prototype.init=function(arg){
		    var _that=this;
		    extend(this.opt,arg);
		    this.opt.stepCounts=this.opt.steps.length;
		    this.content=$(this.opt.content);
		    this.pageCont=this.content.find(this.opt.pageCont)
		    var w_con=$(this.content).width();
		    var stepContainer=this.content.find('.ystep-container');
		    this.stepContainer=stepContainer;
		    var stepsHtml=$("<ul class='ystep-container-steps'></ul>");
		    var stepDisc = "<li class='ystep-step ystep-step-undone'></li>";
		    var stepP=$("<div class='ystep-progress'>"+
		                "<p class='ystep-progress-bar'><span class='ystep-progress-highlight' style='width:0%'></span></p>"+
		            "</div>");
		    var w_li=76;
		    var marginRight=122
		    stepP.css('width',(w_li+marginRight)*(this.opt.stepCounts-1));
			stepP.find('.ystep-progress-bar').css('width',(w_li+marginRight)*(this.opt.stepCounts-1));
		    for(var i=0;i<this.opt.stepCounts;i++){
				if (percentage && percentage.length > 0){
					var span="<span>"+percentage[i]+"</span>"+"<span>"+this.opt.steps[i]+"</span>"
					var _s=$(stepDisc).html(span)
				}else{
					if(i==0){
			            var _s=$(stepDisc).html("<span>"+this.opt.steps[i]+"</span>").addClass('')
			        }else{
			            var _s=$(stepDisc).html("<span>"+this.opt.steps[i]+"</span>")
			        }
				}
		        
		        stepsHtml.append(_s);
		    }
		    stepsHtml.find('li').css('width',76+'px').css('marginRight',marginRight)
		    stepContainer.append(stepsHtml).append(stepP);
		    
		    stepContainer.css('left',(w_con-stepP.width()-this.opt.imgWidth-10-this.opt.stepContainerMar*2)/2)
		    this.content.css('overflow','hidden')
		    this.setProgress(this.stepContainer,this.opt.curStep,this.opt.stepCounts)
		     $(window).resize(function(){
		        var w_con=$(_that.content).width();
		        //var w_li=w_con/_that.opt.stepCounts/2;
		        var w_li=76;
		        var marginRight=122;
		        stepP.css('width',(w_li+marginRight)*2*(_that.opt.stepCounts-1));
		        stepP.find('.ystep-progress-bar').css('width',(w_li+marginRight)*(_that.opt.stepCounts-1))
		        stepsHtml.find('li').css('width',w_li+'px').css('marginRight',172)
		        stepContainer.css('left',(w_con-stepP.width()-_that.opt.imgWidth-10-_that.opt.stepContainerMar*2)/2)
		     })
		}
		//设置进度条
		SetStep.prototype.setProgress=function(n,curIndex,stepsLen){
		  var _that=this;
		    //获取当前容器下所有的步骤
		    var $steps = $(n).find("li");
		    var $progress =$(n).find(".ystep-progress-highlight");
		    //判断当前步骤是否在范围内
		    if(1<=curIndex && curIndex<=$steps.length){
		      //更新进度
		      var scale = "%";
		      scale = Math.round((curIndex-1)*100/($steps.length-1))+scale;
		      $progress.animate({
		        width: scale
		      },{
		        speed: 1000,
		        done: function() {
		          //移动节点
		          $steps.each(function(j,m){
		            var _$m = $(m);
		            var _j = j+1;
		            if(_j < curIndex){
		              _$m.attr("class","ystep-step-done");
		            }else if(_j === curIndex){
		              _$m.attr("class","ystep-step-active");
		            }else if(_j > curIndex){
		              _$m.attr("class","ystep-step-undone");
		            }
		          })
		          if(_that.opt.showBtn){
		              if(curIndex==1){
		                  _that.prevBtn.attr('disabled','true')
		                  _that.nextBtn.removeAttr('disabled')
		              }else if(curIndex==stepsLen){
		                  _that.prevBtn.removeAttr('disabled')
		                  _that.nextBtn.attr('disabled','true')
		              }else if(1<curIndex<stepsLen){
		                  _that.prevBtn.removeAttr('disabled')
		                  _that.nextBtn.removeAttr('disabled')
		              }
		          }
		           //_that.checkPage(_that.pageCont,_that.opt.curStep,_that.opt.stepCounts)
		           _that.opt.animating=false;
		        }
		      });  
		    }else{
		        return false;
		    }
		}

		//加载流程树
		function getFormant(args){
            admin.req({
                url: 'myapi/DC/api/rest/web/custom/SelectInformantByTaskid',
                data: {
                    taskid: args.id
                },
                success:function(result){
                    if (result.retcode=='0'){
						var data = result.data.data;
						if(data && data.listquery && data.writemsg){
							handleStateMap(data.listquery);
							view('chart-container-wrapper-temporary').render('./task/permanent/chart',{info: data.writemsg, tid: data.taskid, args: args, type: 'ls'});
							showChartsFun(result);
						}
                    }
                }
			});  

		}
		//画echarts流程图
		//统计某个元素出现的次数
		function getRepeatNum(dataArr){ 
			var obj = {}; 
			for(var i= 0, l = dataArr.length; i< l; i++){ 
				var item = dataArr[i].level; 
				obj[item] = (obj[item] +1 ) || 1; 
			} 
			return obj; 
		} 
	// 	var dataArr=[
    //     {name:"陈纯子",level:"root",value:{"创建人：":"张三","创建时间：":"2020-06-09"}}, 
    //     {name:"领导人1",level:"1",value:{"创建人：":"张三","创建时间：":"2020-06-09"}}, 
    //     {name:"领导人2",level:"1",value:{"创建人：":"张三","创建时间：":"2020-06-09"}}, 
    //     {name:"领导人3",level:"2",value:{"创建人：":"张三","创建时间：":"2020-06-09"}}, 
    //     {name:"领导人4",level:"2",value:{"创建人：":"张三","创建时间：":"2020-06-09"}}, 
    //     {name:"领导人5",level:"2",value:{"创建人：":"张三","创建时间：":"2020-06-09"}}, 
    //     {name:"领导人6",level:"3",value:{"创建人：":"张三","创建时间：":"2020-06-09"}}, 
    //     {name:"领导人7",level:"4",value:{"创建人：":"张三","创建时间：":"2020-06-09"}}, 
    //     {name:"领导人8",level:"4",value:{"创建人：":"张三","创建时间：":"2020-06-09"}},
    //     {name:"结束",level:"5"}, 
    // ]
     
    // var linksArr=[
    //     { 
    //         source: '陈纯子',
    //         target: '领导人1'
    //     },
    //     { 
    //         source: '陈纯子',
    //         target: '领导人2'
    //     },
    //     { 
    //         source: '领导人1',
    //         target: '领导人3'
    //     },
    //     { 
    //         source: '领导人2',
    //         target: '领导人4'
    //     },
    //     { 
    //         source: '领导人2',
    //         target: '领导人5'
    //     },
    //     { 
    //         source: '领导人5',
    //         target: '领导人6'
    //     },
    //     { 
    //         source: '领导人6',
    //         target: '领导人7'
    //     },
    //     { 
    //         source: '领导人6',
    //         target: '领导人8'
    //     },
    //     { 
    //         source: '领导人8',
    //         target: '结束'
    //     },
    //     { 
    //         source: '领导人7',
    //         target: '结束'
    //     }
         
    // ]
		function showChartsFun(result){    
			// document.getElementById('processBox').setAttribute('_echarts_instance_', '') 
			
			if(tools.isIE()){  
				$(".processBox").remove();
				$(".temporary-right .layui-show").empty().append("<div class='processBox' id='processBox'></div>") 
			}else{
				document.getElementById('processBox').removeAttribute("_echarts_instance_");
			}

			var dataArr=result.data.dataflow; 
			var newDataArr=[],duplicate={};
            var repeatNumObj=getRepeatNum(dataArr);
            var defaultYObj={

			}  
            for(var key in repeatNumObj){
                 if(repeatNumObj[key]>1){ 
                    defaultYObj[key]=0;
                 } 
			} 
            for(var i=0;i<dataArr.length;i++){
                var symbol="",initX=100,initY=100,currentX,currentY,defaultIncreX=100,defaultIncreY=50;
                if(i==0){//image:///src/views/task/temporary/images/centerIcon.png
                    symbol="image:///src/views/task/temporary/images/startIcon.png"
                }else if(dataArr[i].name=="结束"){
                    symbol="image:///src/views/task/temporary/images/endIcon.png"
                }else{
                    symbol="image:///src/views/task/temporary/images/centerIcon.png"
                } 
                if(dataArr[i].level=="root"){
                    currentX=initX;
                    currentY=initY;
                }else{
                    if(repeatNumObj[dataArr[i].level]>1){
                        // repeatNumObj[dataArr[i].level]
                        if(repeatNumObj[dataArr[i].level]){
                            defaultYObj[dataArr[i].level]=defaultYObj[dataArr[i].level]+defaultIncreY;
                        }
                        currentX=initX*(Number(dataArr[i].level))+initX;
                        currentY=defaultYObj[dataArr[i].level]
                    }else{
                        currentX=initX*(Number(dataArr[i].level))+initX;
                        currentY=initY;
                    }
                }
                var eachNewObj={
					name: dataArr[i].name,
					value: dataArr[i].value,
                    x:currentX,
                    y:currentY,
                    symbol:symbol
                };
                newDataArr.push(eachNewObj);
            } 
            var option = { 
                animationDurationUpdate: 1500,
                coordinateSystem: 'polar',
                animationEasingUpdate: 'quinticInOut',
                tooltip: {
                    trigger: 'item',
                    formatter:function(params){    
						var valueArr=params.value?params.value:[];  
						var pBox="<div class='toolTipBox'>";
						for(var i=0;i<valueArr.length;i++){
							pBox+="<p>"+valueArr[i]+"</p>";
						}
						// for(key in valueObj){
						// 	pBox+="<p>"+valueObj[key]+"</p>";
						// }
						pBox+="</div>"; 
                        return valueArr.length>0?pBox:"";
                    },
                    backgroundColor:"rgba(255,255,255,0.2)",
                    borderWidth:1,
                    borderColor:"#DFE4EB",
                    padding:[10,20],
                    textStyle:{
                        color:"#41719C"
                    }
                }, 
                series: [ 
                    {
                        type: 'graph',
                        layout: 'none',
                        symbolSize: 50,
                        roam: false,
                        label: {
                            show: true,
                            position:'bottom'
                        }, 
                        hoverAnimation:false,
                        edgeSymbol: ['none', 'arrow'],
						edgeSymbolSize: [4, 10],   
						itemStyle:{
							color:'#000'
						},
                        data: newDataArr,
						// links: linksArr,
						links:result.data.linkflow,
                        lineStyle: {
                            opacity: 0.9,
                            width: 2,
                            color:"#DFE4EB",  
                            curveness: 0  
                        }
                    }
                ]
            };
			var myChart = echarts.init(document.getElementById("processBox"));  

            myChart.setOption(option,true);  
			// myChart.on('click', function (params) { 
			// 	if (params.componentType === 'markPoint') {
			// 	    // 点击到了 markPoint 上
			// 	    if (params.seriesIndex === 5) {
			// 	        // 点击到了 index 为 5 的 series 的 markPoint 上。
			// 	    }
			// 	}
			// 	else if (params.componentType === 'series') {
			// 	    if (params.seriesType === 'graph') {
			// 	        if (params.dataType === 'edge') {
			// 	            // 点击到了 graph 的 edge（边）上。
			// 	        }
			// 	        else {
			// 	            // 点击到了 graph 的 node（节点）上。
			// 	        }
			// 	    }
			// 	}
			// });
		}
		
	});    
	   
</script>